<template>
    <div class="body">
        <header class="header">
            <div class="title">
                <router-link to="/index">
                    <img src="../../../assets/images/01_11.png" alt="" class="img_zuo" />
                </router-link>
                <div>巡查排查</div>
                <img src="../../../assets/images/tj.png" alt="" class="img_jia">
            </div>
        </header>
        <div class="contant">

            <!--<van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
                <van-list v-model="loading" :finished="finished" finished-text="加载完毕" :error.sync="error"
                    error-text="请求失败，点击重新加载" @load="onLoad">
                    <div class="box_list" v-for="item in list" :key="item">
                        <img class="img_logo5" src="../../../assets/images/logo5.png" />
                        <div class="center">
                            <div style="width:70%">
                                <div class="small_title">重庆市滴滴滴重庆市滴滴滴重庆市滴滴滴</div>
                                <div class="introduce">
                                    <div>张三</div>
                                    <div class="intro_name">
                                        <img src="../../../assets/images/people.png" />
                                        <div>滴滴滴</div>
                                    </div>
                                </div>
                            </div>
                            <div class="data">{{item}}</div>
                        </div>
                    </div>
                </van-list>
           <!-- </van-pull-refresh>-->
        </div>


    </div>
</template>

<script>
    export default {
        name: 'list_ceshi',
        data() {
            return {
                list: [],
                loading: false,//加载状态结束false
                finished: false,//全部加载完成true
                error: false,//出错状态
                refreshing: false,//是否下拉加载 是true
                cunt: 0,
            }
        },
        methods: {
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.cunt += 1
                    console.log(this.cunt)
                    // 加载状态结束
                    this.loading = false;
                    // 出错
                    if (this.cunt >= 2) {
                        this.error = true;
                    }
                    // 数据全部加载完成
                    if (this.cunt >= 4) {
                        // this.error = true;
                        this.finished = true;
                    }


                }, 1000);

            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.cunt=0
                this.onLoad();
            },


        },
        mounted() {

        },
        created() {
            this.userId = localStorage.getItem("userId")//获取访问id



        }
    }
</script>

<style scoped>
    /* 头部 */
    .header {
        height: 1.8519rem;
        background: #007aff;
        padding-top: 0.8333rem;
        box-sizing: border-box;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 20;
        font-size: 0.388888rem;
    }

    .title {
        padding: 0 0.3704rem;
        display: flex;
        align-items: center;
        color: #fff;
    }

    .title>div {
        width: 100%;
        font-size: 0.4444rem;
        text-align: center;
    }

    .img_zuo {
        width: 0.2593rem;
        height: 0.463rem;
    }

    .img_jia {
        width: 0.463rem;
        height: 0.463rem;
        position: absolute;
        right: 0.3704rem;
    }





    /* 弹框 */

    .yc {
        display: none;
    }

    .triangle {
        width: 0;
        height: 0;
        border-left: 0.2222rem solid transparent;
        border-right: 0.2222rem solid transparent;
        border-bottom: 0.4444rem solid #686868;
        position: fixed;
        top: 1.4815rem;
        right: 0.3704rem;
        z-index: 21;
    }

    .xz_conter {
        width: 1.8519rem;
        border-radius: 0.1852rem;
        padding: 0 0.1111rem;
        background: #686868;
        position: fixed;
        top: 1.8519rem;
        right: 0.0926rem;
        color: #fff;
        font-size: 0.3889rem;
    }

    .xz_conter>div {
        font-size: 0.3519rem;
        padding: 0.2222rem 0.0926rem;
        border-bottom: 1Px solid #888888;

    }



    /* 底部导航 */
    .van-tabbar {
        padding: 0.4rem 0;
    }

    .van-tabbar--fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        background: #ffffff;
    }

    .van-tabbar--fixed {
        border-top: 1px solid #cccccc;
        /* border: none; */
        padding-top: 0.8rem;
    }

    .van-tabbar-item {
        font-size: 0.44rem;
        line-height: 0.6rem;
    }

    .van-tabbar-item__icon img {
        display: block;
        height: 0.5333rem;
    }

    [class*=van-hairline]::after {
        border: none;
    }

    /* 主体 */

    .img_logo5 {
        width: 0.8rem;
        margin: 0 0.2778rem;
        margin-right: 0.5556rem;
    }

    .data {
        color: #8E8E8E;
    }

    .center {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0.2778rem;

    }

    .intro_name {
        display: flex;
        align-items: center;
        margin-left: 0.5rem;
    }

    .intro_name img {
        width: 0.4rem;
        margin-right: 0.1852rem;
    }

    .introduce {
        display: flex;
        color: #8E8E8E;
        font-size: 0.3148rem;
        align-items: center;
        margin-top: 0.1852rem;
    }

    .small_title {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .box_list {
        border-bottom: 1Px solid #ddd;
        display: flex;
        align-items: center;
        height: 1.3889rem;
        box-sizing: border-box;
    }

    .img_big {
        width: 0.629629rem;
        height: 0.629629rem;
    }

    .contant {
        margin-top: 1.8519rem;
        border: 1px solid #F7F7F9;
        padding-bottom: 1.6667rem;
    }
</style>